<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>事件绑定</p>
    <!-- 1.没有参数 -->
    <button @click="showHello">click</button>
    <hr>
    <!-- 2.传递参数，自定义参数 -->
    <button @click="showArg(666, msg)">click</button>
    <hr>
    <!-- 3.传递参数，预定义参数，事件对象 -->
    <!-- 显式传递 -->
    <button @click="showEvent($event)">click</button>
    <input type="text" @input="showEvent($event)">
    <!-- 隐式传递 -->
    <button @click="showEvent">click</button>
    <input type="text" @input="showEvent">
    <hr>
    <!-- 4.我全都要 -->
    <!-- 只能显式传递，不能隐式 -->
    <button @click="showAll(666, $event)">click</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hi~'
      },
      methods: {
        // 没有参数
        showHello() {
          console.log('hello');
          console.log(this.msg);
        },
        // 自定义参数
        showArg(num, arg2) {
          console.log(num);
          console.log(arg2);
        },
        // 预定义参数，事件对象e
        showEvent(e) {
          console.log(e);
        },
        // 我全都要
        showAll(num, e) {
          console.log(num);
          console.log(e);
        }
      },
    })
  </script>
</body>
</html>